<style lang="less">
</style>

<template>
    <div class="operation-logs-view">
        <Card>
            <span slot="title">系统操作日志记录</span>
            <span slot="extra">
                <Button size="small" type="success" @click="getList"><Icon type="loop"></Icon>刷新列表</Button>
            </span>

            <Form label-position="left" label-width="80" inline>
                <Row>
                    <FormItem label-width="0">
                        <Input size="small" placeholder="关键词" v-model="search.keyword"></Input>
                    </FormItem>

                    <FormItem label="日志级别：">
                        <Select size="small" v-model="search.level" placeholder="日志级别">
                            <Option value="">全部</Option>
                            <Option value="info">信息</Option>
                            <Option value="debug">调试</Option>
                            <Option value="error">错误</Option>
                            <Option value="warn">警告</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="记录日期:">
                        <DatePicker size="small" @on-change="handleChangeDate" type="datetimerange" placeholder="请选择时间段" style="width:260px"></DatePicker>
                    </FormItem>
                    <FormItem label-width="0">
                        <Button type="success" :loading="searchLoading" size="small" icon="ios-search" @click="handleSearch" >检索</Button>
                    </FormItem>
                </Row>
            </Form>
            <Row>
                <Col>
                <Table border :loading="loading" height="450" :context="self" :columns="columns" :data="data"></Table>
                </Col>
            </Row>
            <Row style="padding: 5px 0">
                <Col>
                <Page ref="Page"
                      :total="page.total"
                      :size="page.size"
                      :current.sync="page.current"
                      @on-change="handleChangePage"
                      @on-page-size-change="handleChangePageSize"
                      :page-size-opts="page.sizes" show-sizer show-elevator></Page>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
    import util from '@/libs/util';
    export default {
        data () {
            return {
                self: this,
                loading: false,

                page: {
                    total: 0,
                    current: 1,
                    size: 10,
                    sizes: [10, 30, 50, 100],
                },

                searchLoading: false,
                search: {
                    keyword: '',
                    created_at: '',
                    level: ''
                },

                columns: [
                    {
                        title: '记录ID',
                        key: 'id',
                        width: 90
                    },
                    {
                        title: '级别',
                        key: 'level_text',
                        width: 80
                    },
                    {
                        title: '标题',
                        key: 'title',
                        width: 180
                    },
                    {
                        title: '内容',
                        key: 'content',
                    },
                    {
                        title: 'IP地址',
                        key: 'ip',
                        width: 120
                    },
                    {
                        title: '记录日期',
                        key: 'created_at',
                        width: 200
                    }
                ],
                data: []
            }
        },

        mounted () {
            this.getList();
        },

        created () {
            this.init();
        },

        methods: {
            init () {
                this.columns.forEach(item => {
                    if (item.key == 'level_text') {
                        item.render = (h, param) => {
                            if ('error' === param.row.level) {
                                return h('span', { style: {color: '#ff0000'} }, param.row.level_text);
                            } else if ('warn' === param.row.level) {
                                return h('span', { style: {color: '#ffc638'} }, param.row.level_text);
                            } else if ('debug' == param.row.level) {
                                return h('span', { style: {color: '#6091ff'} }, param.row.level_text);
                            } else {
                                return h('span', {}, param.row.level_text);
                            }
                        };
                    }
                });
            },

            getList () {
                this.loading = true;

                let params = {
                    page: this.page.current,
                };
                params = Object.assign(params, this.search);

                util.api().get(`/admin/api/operation/logs`, {
                    params,
                    headers: {
                        pageSize: this.page.size,
                    }
                }).then((resp) => {
                    this.$Message.destroy();
                    if (resp.data.status == true) {
                        this.data = resp.data.data;
                        this.page.total = resp.data.meta.total;
                        this.page.current = resp.data.meta.current_page;
                    } else {
                        this.$Message.error(resp.data.message);
                    }
                    this.loading = false;
                }).catch((e) => {
                    util.handleApiException(e, this, '获取系统操作日志失败');
                })
            },

            handleChangePage (page) {
                this.page.current = page;
                this.getList();
            },

            handleChangePageSize (size) {
                this.page.size = size;
                this.getList();
            },

            handleSearch () {
                this.page.current = 1;
                this.getList();
            },

            handleChangeDate (date) {
                if (date[1] != undefined) {
                    this.search.created_at = date;
                } else {
                    this.search.created_at = [];
                }
            }
        }
    };
</script>
